<template>
	<view class="data-info-box" @click="handlderClick">
		<view class="middleCenter cateIcon">
			<category :type="data.key" />
		</view>
		<view class="data-info-box-left">
			<view class="name">
				{{data.recordName || data.name}}
			</view>
			<view class="value">
				{{getHistoryValue(data)}}
			</view>
			<view class="remark" v-if="data.remark">
				{{data.remark}}
			</view>
		</view>
		<view class="data-info-box-right">
			{{formatTimeComparison(data.time)}}
			<!-- <uni-dateformat :date="now - 30000" :threshold="[0,3600000]"></uni-dateformat> -->
		</view>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import {getHistoryData,formatTimeComparison,paginateWithInfo} from '@/utils/index.js'
	const props = defineProps({
		data:{
			type:Object,
			default:()=>({}),
			required:true
		}
	})
	const emit = defineEmits()
	
	const handlderClick = ()=>{
		emit('handlderClick',props.data)
	}
	
	const getHistoryValue=(item)=>{
		let valueStr = ''
		let {historyValue,key,breastName,min,
		traitName,colorName,stoolOutputName,contentValue
		} = item
		switch (key){
			case 'Breastfeeding':
				valueStr = `${min}分钟(${breastName}乳房)`
				break;
			case 'MixedFeeding':
				valueStr = `${historyValue}毫升`
				break;
			case 'Pumping':
				valueStr = `${min}毫升(${breastName}乳房)`
				break;
		
			default:
				valueStr = contentValue ||  historyValue
				break;
		}
		return valueStr
	}
	
	
	
</script>

<style lang="scss" scoped>
.data-info-box{
	border: 1px solid rgba(0, 0, 0, .1);
	border-radius: 10rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
	display: flex;
	justify-content: space-between;
	.cateIcon{
		padding-right: 20rpx;
	}
	.data-info-box-left{
		flex: 1;
	}
	.name{
		font-size: 32rpx;
	}
	.value{
		font-size: 28rpx;
		margin-top: 15rpx ;
	}
	.remark{
		margin-top:  15rpx;
		font-size: 28rpx;
		color: #ccc;
	}
	.data-info-box-right{
		font-size: 28rpx;
		color: #333;
	}
}
</style>